<#include "/common/head.html"/>
<div class="home-page">
	<div class="content">
	    <div class="home-slider outer-bottom-vs" style="background-color: #EAEBE7;height: 340px;">
	        <div id="hero">
		        <div id="demo1" class="slideBox">
  					<ul class="items" id="recommend_items">
  		                <#list recommendbooks.rows as recommendbook>
   	                        <li><a href="/book/get?id=${recommendbook.bid!}&cid=${recommendbook.cid!}" title="${recommendbook.bname!}"><img src="${recommendbook.bigimage!}" width="900px;" height="340px;"></a></li>
		                </#list>
                    </ul>
                </div>
            </div>
        </div>
		<div class="container">
			<section class="best-seller wow fadeInUp">

    <div id="best-seller" class="module" >

        <div class="module-heading home-page-module-heading">

            <h2 class="module-title home-page-module-title"><span>热销排行榜</span></h2>

        </div><!-- /.module-heading -->

        <div class="module-body" style="padding-left: 17px;">

            <div class="row books full-width">
                <div class="clearfix text-center">
					<#list hotBooks.rows as hotbook>
                    <div class="col-md-3 col-sm-4">
                        <div class="book">
						<a href="/book/get?id=${hotbook.bid}&cid=${hotbook.cid!}">
                         <div class="book-cover" style="padding-left: 17px;">
                          <img width="140" height="212" alt="" src="${hotbook.image!}" data-echo="images/3_blank.gif">
                             <#if hotbook_index==0>
								 <div class="tag">
                                        <span>hot</span>
                                    </div>
                                 </#if>
                            </div>
                            </a>
                            <div class="book-details clearfix">
                                <div class="book-description">
                                    <h3 class="book-title"><a href="single-book.html">${hotbook.cname!}</a></h3>
                                    <p class="book-subtitle">作者<a href="single-book.html">${hotbook.author!}</a></p>
                                </div>
                                 <div class="text-center">
                                    <div class="actions">
                                        <span class="book-price price">${hotbook.price!}元</span>
                                        <div class="cart-action">
                                                 <a class="add-to-cart" title="添加到购物车" href="#" onclick="addToCart('${hotbook.bid!}','${hotbook.price!}')">添加到购物车</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
				</#list>
                <div class="view-more-holder col-md-12 center-block text-center inner-top-xs">

                <a role="button" class="btn btn-primary btn-uppercase" href="/book/list?rows=8">更多图书</a>
                </div>
            </div>

        </div>

    </div>

</section>
		</div>
	</div>
</div>
<#include "/common/foot.html"/>
<link href="/static/css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="/static/js/jquery.slideBox.min.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery(function($){
		getCategores();
		 $('#demo1').slideBox({
		        duration : 0.3,//滚动持续时间，单位：秒
		        easing : 'linear',//swing,linear//滚动特效
		        delay : 3,//滚动延迟时间，单位：秒
		        hideClickBar : false,//不自动隐藏点选按键
		        clickBarRadius : 10
		    });
	});
	function getCategores(){
		$.get("/category/list",{},function(data,status){
			var html="<li class='active' style='border: none;'><a href='/book/list?rows=8'>所有图书</a></li>";
			$.each(data,function(i,category){
				html+="<li class='active' style='border: none;'><a href='/book/list?rows=8&cid="+category.cid+"'>"+category.cname+"</a></li>";
			});
			$("#categories").append(html);
		});
	}
</script>
</html>